<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>放空心灵枷锁，回归宁静自我</title>
  <link rel="stylesheet" href="index.css">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.svg" media="screen">
</head>

<body>

  <!-- 播放器来源：https://gitee.com/xfwlclub/xf-MusicPlayer#https://gitee.com/link?target=https%3A%2F%2Fmusicplayer.xfyun.club%2F -->

  <div class="content">
    <h2>跟着音乐的节奏</h2>
    <h2>放空心灵上的枷锁</h2>
    <h2>回归内心的平静与纯粹</h2>
    <h2>寻找内心深处最真实的自己</h2>
  </div>

  <div class="settingCon">
    <span>定时关闭</span>
    <div class="time">
      <div class="timeNumber" onclick="onTimeNumber(this,0,20)">20</div>
      <div class="timeNumber" onclick="onTimeNumber(this,1,30)">30</div>
      <div class="timeNumber" onclick="onTimeNumber(this,2,40)">40</div>
      <div class="timeNumber" onclick="onTimeNumber(this,3,50)">50</div>
      <div class="timeNumber" onclick="onTimeNumber(this,4,60)">60</div>
    </div>
    <span>背景颜色</span>
    <div class="background" onclick="setBodyBg(event)">
    </div>
  </div>

  <div class="setting" onclick="set(event)">
    <img src="./setting.svg" alt="">
  </div>

  <div id="xf-MusicPlayer" data-localMusic="playlistData.json" data-cdnName="https://player.xfyun.club/js"
    data-themeColor="xf-girlPink" data-fadeOutAutoplay data-lyrics="0"></div>

  <script>
    let b = [
      "linear-gradient(45deg, rgb(255, 154, 158) 0%, rgb(250, 208, 196) 99%, rgb(250, 208, 196) 100%)",
      "linear-gradient(to top, rgb(161, 140, 209) 0%, rgb(251, 194, 235) 100%)",
      "linear-gradient(to top, rgb(250, 208, 196) 0%, rgb(250, 208, 196) 1%, rgb(255, 209, 255) 100%)",
      "linear-gradient(to right, rgb(255, 236, 210) 0%, rgb(252, 182, 159) 100%)",
      "linear-gradient(to right, rgb(255, 129, 119) 0%, rgb(255, 134, 122) 0%, rgb(255, 140, 127) 21%, rgb(249, 145, 133) 52%, rgb(207, 85, 108) 78%, rgb(177, 42, 91) 100%)",
      "linear-gradient(to top, rgb(255, 154, 158) 0%, rgb(254, 207, 239) 99%, rgb(254, 207, 239) 100%)",
      "linear-gradient(120deg, rgb(246, 211, 101) 0%, rgb(253, 160, 133) 100%)",
      "linear-gradient(to top, rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%)",
      "linear-gradient(to top, rgb(253, 203, 241) 0%, rgb(253, 203, 241) 1%, rgb(230, 222, 233) 100%)",
      "linear-gradient(120deg, rgb(161, 196, 253) 0%, rgb(194, 233, 251) 100%)",
      "linear-gradient(120deg, rgb(212, 252, 121) 0%, rgb(150, 230, 161) 100%)",
      "linear-gradient(120deg, rgb(132, 250, 176) 0%, rgb(143, 211, 244) 100%)",
      "linear-gradient(to top, rgb(207, 217, 223) 0%, rgb(226, 235, 240) 100%)",
      "linear-gradient(120deg, rgb(166, 192, 254) 0%, rgb(246, 128, 132) 100%)",
      "linear-gradient(120deg, rgb(252, 203, 144) 0%, rgb(213, 126, 235) 100%)",
      "linear-gradient(120deg, rgb(224, 195, 252) 0%, rgb(142, 197, 252) 100%)",
      "linear-gradient(120deg, rgb(240, 147, 251) 0%, rgb(245, 87, 108) 100%)",
      "linear-gradient(120deg, rgb(253, 251, 251) 0%, rgb(235, 237, 238) 100%)",
      "linear-gradient(to right, rgb(79, 172, 254) 0%, rgb(0, 242, 254) 100%)",
      "linear-gradient(to right, rgb(67, 233, 123) 0%, rgb(56, 249, 215) 100%)",
      "linear-gradient(to right, rgb(250, 112, 154) 0%, rgb(254, 225, 64) 100%)",
      "linear-gradient(to top, rgb(48, 207, 208) 0%, rgb(51, 8, 103) 100%)",
      "linear-gradient(to top, rgb(168, 237, 234) 0%, rgb(254, 214, 227) 100%)",
      "linear-gradient(to top, rgb(94, 231, 223) 0%, rgb(180, 144, 202) 100%)",
      "linear-gradient(to top, rgb(210, 153, 194) 0%, rgb(254, 249, 215) 100%)",
      "linear-gradient(135deg, rgb(245, 247, 250) 0%, rgb(195, 207, 226) 100%)",
      "radial-gradient(248px, rgb(22, 217, 227) 0%, rgb(48, 199, 236) 47%, rgb(70, 174, 247) 100%)",
      "linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 100%)",
      "linear-gradient(135deg, rgb(253, 252, 251) 0%, rgb(226, 209, 195) 100%)",
      "linear-gradient(120deg, rgb(137, 247, 254) 0%, rgb(102, 166, 255) 100%)",
      "linear-gradient(to top, rgb(253, 219, 146) 0%, rgb(209, 253, 255) 100%)",
      "linear-gradient(to top, rgb(152, 144, 227) 0%, rgb(177, 244, 207) 100%)",
      "linear-gradient(to top, rgb(235, 192, 253) 0%, rgb(217, 222, 216) 100%)",
      "linear-gradient(to top, rgb(150, 251, 196) 0%, rgb(249, 245, 134) 100%)",
      "linear-gradient(rgb(42, 245, 152) 0%, rgb(0, 158, 253) 100%)",
      "linear-gradient(to top, rgb(205, 156, 242) 0%, rgb(246, 243, 255) 100%)",
      "linear-gradient(to right, rgb(228, 175, 203) 0%, rgb(184, 203, 184) 0%, rgb(184, 203, 184) 0%, rgb(226, 197, 139) 30%, rgb(194, 206, 156) 64%, rgb(126, 219, 220) 100%)",
      "linear-gradient(to right, rgb(184, 203, 184) 0%, rgb(184, 203, 184) 0%, rgb(180, 101, 218) 0%, rgb(207, 108, 201) 33%, rgb(238, 96, 156) 66%, rgb(238, 96, 156) 100%)",
      "linear-gradient(to right, rgb(106, 17, 203) 0%, rgb(37, 117, 252) 100%)",
      "linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.5) 50%)",
      "linear-gradient(to top, rgb(55, 236, 186) 0%, rgb(114, 175, 211) 100%)",
      "linear-gradient(to top, rgb(235, 187, 167) 0%, rgb(207, 199, 248) 100%)",
      "linear-gradient(to top, rgb(255, 241, 235) 0%, rgb(172, 224, 249) 100%)",
      "linear-gradient(to right, rgb(238, 162, 162) 0%, rgb(187, 193, 191) 19%, rgb(87, 198, 225) 42%, rgb(180, 159, 218) 79%, rgb(122, 197, 216) 100%)",
      "linear-gradient(rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at center top, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 120%)",
      "linear-gradient(to top, rgb(196, 113, 245) 0%, rgb(250, 113, 205) 100%)",
      "linear-gradient(to top, rgb(72, 198, 239) 0%, rgb(111, 134, 214) 100%)",
      "linear-gradient(to right, rgb(247, 140, 160) 0%, rgb(249, 116, 143) 19%, rgb(253, 134, 140) 60%, rgb(254, 154, 139) 100%)",
      "linear-gradient(to top, rgb(254, 173, 166) 0%, rgb(245, 239, 239) 100%)",
      "linear-gradient(to top, rgb(230, 233, 240) 0%, rgb(238, 241, 245) 100%)",
      "linear-gradient(to top, rgb(172, 203, 238) 0%, rgb(231, 240, 253) 100%)",
      "linear-gradient(-20deg, rgb(233, 222, 250) 0%, rgb(251, 252, 219) 100%)",
      "linear-gradient(to top, rgb(193, 223, 196) 0%, rgb(222, 236, 221) 100%)",
      "linear-gradient(to top, rgb(11, 163, 96) 0%, rgb(60, 186, 146) 100%)",
      "linear-gradient(to top, rgb(0, 198, 251) 0%, rgb(0, 91, 234) 100%)",
      "linear-gradient(to right, rgb(116, 235, 213) 0%, rgb(159, 172, 230) 100%)",
      "linear-gradient(to top, rgb(106, 133, 182) 0%, rgb(186, 200, 224) 100%)",
      "linear-gradient(to top, rgb(163, 189, 237) 0%, rgb(105, 145, 199) 100%)",
      "linear-gradient(to top, rgb(151, 149, 240) 0%, rgb(251, 200, 212) 100%)",
      "linear-gradient(to top, rgb(167, 166, 203) 0%, rgb(137, 137, 186) 52%, rgb(137, 137, 186) 100%)"
    ]

    // 判断是手机浏览器还是电脑浏览器
    function isMobileBrowser() {
      // 正则表达式用于匹配常见的移动设备标识符
      const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
      // 检查userAgent字符串是否包含任何移动设备标识符
      return mobileRegex.test(navigator.userAgent);
    }

    if (isMobileBrowser()) { location.href = '/index_mobile.html'; }

    // 循环添加背景色卡
    let bg = document.createElement('div');
    bg.classList.add('bg');
    let background = document.querySelector('.background');
    let body = document.body;
    b.forEach((item, index) => {
      bg.style = `background-image: ${item};`
      background.appendChild(bg.cloneNode(true));
    })

    // 显示和隐藏设置区域
    let settingCon = document.querySelector('.settingCon')
    function set(event) {
      let v = window.getComputedStyle(settingCon).visibility
      if (v == 'hidden') settingCon.style.visibility = 'visible';
      else settingCon.style.visibility = 'hidden';
    }

    // 设置背景颜色
    function setBodyBg(event, bgcolor) {
      let currentColor = bgcolor || event?.target.style["background-image"];
      if (!currentColor) return;
      body.style = `background-image: ${currentColor};`;
      localStorage.setItem('bodyBg', currentColor);
    }

    // 选择关闭时长
    function onTimeNumber(then, num, timeN) {
      localStorage.setItem('timeNumber', num + ',' + timeN);
      document.querySelector('.active')?.classList.remove('active');
      then.classList.add('active')
    }

    // 设置背影颜色
    setBodyBg(null, localStorage.getItem('bodyBg'));
    // 设置定时关闭的选项
    document.querySelectorAll('.timeNumber')[localStorage.getItem('timeNumber')?.split(',')[0] ||
      1].classList.add('active');

    // 获取 XFMusicPlayer 对象，并设置定时关闭
    let o;
    let t = setInterval(() => {
      if (XFMusicPlayer) {
        XFMusicPlayer.addEventListener('play', function () {
          clearTimeout(o);
          o = setTimeout(() => {
            document.querySelector('.xf-playbackControl.xf-bePlaying').click();
          }, Number(localStorage.getItem('timeNumber').split(',')[1] || 30) * 1000 * 60);
        });
        XFMusicPlayer.loop = true; // 无限循环播放
        XFMusicPlayer.play();
        // XFMusicPlayer.addEventListener('pause', function () { console.log('Audio is paused'); });
        clearInterval(t);
      }
    }, 50);

  </script>

  <script src="./xf-MusicPlayer.min.js"></script>
  <script src="https://player.xfyun.club/js/yinghua.js"></script>
</body>

</html>